<template>
    <div class="refund-container">

      <el-table
        :data="tableData"
        style="width: 99.8%;position: absolute;right: 0; margin-top: 5%"
        @selection-change="handleSelectionChange">
        <el-table-column
          label="操作时间"
          prop="generateTime"
          width="200">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-link type="primary"
                     size="mini"
                     @click="visible = true;getIndentMessage(scope.$index, scope.row)">订单详情</el-link>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteRefund(scope.$index, scope.row)" style="position: absolute; left: 28%; top:19%">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="退订详情" :visible.sync="visible">
        <el-table
          :data="refund"
          @selection-change="handleSelectionChange">
          <el-table-column
            label="生成时间"
            prop="generateTime"
            width="200">
          </el-table-column>
          <el-table-column
            prop="name"
            label="乘客姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="passengerId"
            label="乘客身份证"
            width="250">
          </el-table-column>
          <el-table-column
            prop="price"
            label="票价"
            width="100">
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-link type="primary"
                       size="mini"
                       @click="visible2 = true;getFlightMessage(scope.$index, scope.row)">航班详情</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <el-dialog title="航班详情" :visible.sync="visible2">

        <el-table
          :data="flight"
          @selection-change="handleSelectionChange">
          <el-table-column
            label="航班编号"
            prop="flightId"
            width="100">
          </el-table-column>
          <el-table-column
            label="起飞时间"
            prop="takeOffDate"
            width="200">
          </el-table-column>
          <el-table-column
            prop="arriveDate"
            label="抵达时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="takeOffAerodrome"
            label="起飞机场"
            width="100">
          </el-table-column>
          <el-table-column
            prop="arriveAerodrome"
            label="抵达机场"
            width="100">
          </el-table-column>
          <el-table-column
            prop="economyPrice"
            label="经济舱价格"
            width="100">
          </el-table-column>
          <el-table-column
            prop="businessPrice"
            label="商务舱价格"
            width="100">
          </el-table-column>
        </el-table>
      </el-dialog>

      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="nextPage()"
        style="position: absolute; bottom: 10%;left: 32%">
      </el-pagination>

    </div>
</template>

<script>

  import {getRefundPage,
    getIndentMessage,
    getFlightMessage,
    deleteRefund} from "../api/refund";
  import {Message} from "element-ui";

  export default {
        name: "Refund",
        data(){
          return{
            visible:false,
            visible2:false,
            total:'',
            pageSize:6,
            currentPage:'',
            flight: [],
            refund:[],
            tableData:[]
          }
        },

       methods:{
         handleSelectionChange(val){
           console.log(val)
         },

         getIndentMessage(index,refund){
           const _this = this;
           getIndentMessage({
             indentId:refund.indentId
           }).then(function (response) {
             _this.refund = response.data.obj;
           })
         },

         getFlightMessage(index,indent){
           const _this = this;
           getFlightMessage({
             indentId:indent.indentId
           }).then(function (response) {
             _this.flight = response.data.obj;
           })
         },

         deleteRefund(index,refund){
           const _this = this;
           this.$confirm('是否删除退订信息?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             deleteRefund({
               id:refund.id
             }).then(function (response) {
               Message({
                 message: response.data.message,
                 type: 'success',
                 duration: 2 * 1000
               })
               getRefundPage({
                 pageSize:_this.pageSize,
                 pageNum:_this.currentPage
               }).then(function (response) {
                 _this.tableData = response.data.obj.refundList;
                 _this.total = response.data.obj.total;
               })
             })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消删除'
             });
           });
         },

         nextPage(){
           const _this = this
           getRefundPage({
             pageSize:this.pageSize,
             pageNum: this.currentPage
           }).then(function (response) {
             _this.tableData = response.data.obj.refundList;
             _this.total = response.data.obj.total;
           })
         }
       },

      created() {
          const _this = this;
          getRefundPage({
            pageSize:this.pageSize,
            pageNum:1
          }).then(function (response) {
            _this.tableData = response.data.obj.refundList;
            _this.total = response.data.obj.total;
          })
      }
    }
</script>

<style>

  *{
    padding: 0;
    margin: 0;
  }

</style>
